<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		div{
            width: 200px;
            height: 100px;
			border: 5px solid #f00;
			display: block; /*块级元素 允许设置宽高 竖着排*/
		}
		span{
			background-color: green;
			display: inline;/*行内元素 不允许设置宽高 横着排*/
            width: 300px;
            height: 300px;
		}
		input,button{
			display: inline-block;/*行内块元素 不仅横着排 而且可以设置宽高*/
			width: 100px;
			height: 100px;
			background-color: blue;
		}
		.d2{
			display: none;
		}
	</style>
</head>
<body>
	<div class="d1">1</div>
	<div class="d2">2</div>
	<div class="d3">3</div>
	<br>
	<span>123456</span>
	<span>123456</span>
	<span>123456</span>
	<span>123456</span>
	<br>
	<input type="text">
	<input type="text">
	<input type="text">
	<button>按钮</button>
	<button>按钮</button>
	<button>按钮</button>
</body>
</html>